 <!-- 个人账户认证 -->
 <template>
 	<view class="shop-container">
 		<block-view padding-top="0">
 			<view class="form-item">
 				<uni-section title-font-size="30rpx" type="line" title="请填写联系人信息"></uni-section>
 				<view class="ipt-item">
 					<text class="name">姓名</text>
 					<input class="ipt" type="text" v-model="formData.name" placeholder="请填写联系人姓名" />
 				</view>
 				<view class="ipt-item top-distance">
 					<text class="name">身份证号</text>
 					<input class="ipt" type="text" v-model="formData.id_card" maxlength="18" placeholder="请填写联系人身份证号" />
 				</view>
 				<view class="ipt-item top-distance no-border">
 					<text class="name">手机号</text>
 					<input class="ipt" type="number" :maxlength="11" v-model="formData.mobile" placeholder="请填写联系人手机号" />
 				</view>
 			</view>
 		</block-view>
 		<block-view padding-top="0">
 			<view class="form-item">
 				<uni-section title-font-size="30rpx" type="line" title="请填写银行卡信息"></uni-section>
 				<view class="ipt-item">
 					<text class="name">银行卡号</text>
 					<input class="ipt" type="text" v-model="formData.bank_no" placeholder="请填写银行卡号" />
 				</view>
 				<view class="ipt-item top-distance no-border">
 					<text class="name">预留手机号</text>
 					<input class="ipt" type="number" :maxlength="11" v-model="formData.bank_mobile" placeholder="请填写银行预留手机号" />
 				</view>
				<view class="ipt-item top-distance no-border">
					<text class="name">开户银行</text>
					<input class="ipt" type="text" :maxlength="50" v-model="formData.bank_name" placeholder="请填写开户银行信息(x银行x支行)" />
				</view>
 			</view>
 		</block-view>
 	</view>
 	<fixed-footer>
 		<primary-btn title="提交" :disabled="btnDisabled" @btnClick="check()"></primary-btn>
 	</fixed-footer>

 	<uni-popup ref="checkPopup" type="center" :is-mask-click="false">
 		<view class="popup-content">
 			<view class="info-wrapper">
 				<image class="check-white" src="/static/images/check-white.svg" mode="widthFix"></image>
 				<view class="info">
 					<view class="info-item">
 						<view class="name">姓名</view>
 						<view class="text">{{ formData.name }}</view>
 					</view>
 					<view class="info-item">
 						<view class="name">身份证号</view>
 						<view class="text">{{ formData.id_card }}</view>
 					</view>
 					<view class="info-item">
 						<view class="name">手机号</view>
 						<view class="text">{{ formData.mobile }}</view>
 					</view>
 					<view class="info-item">
 						<view class="name">银行卡号</view>
 						<view class="text">{{ formData.bank_no }}</view>
 					</view>
 					<view class="info-item">
 						<view class="name">银行预留手机</view>
 						<view class="text">{{ formData.bank_mobile }}</view>
 					</view>
					<view class="info-item">
						<view class="name">开户银行</view>
						<view class="text">{{ formData.bank_name }}</view>
					</view>
 				</view>

				<view class="btn-wrapper">
					<view class="left-btn" hover-class="tap-hover" @click="$popupChange(this, 'checkPopup')">我要修改</view>
					<view class="right-btn" hover-class="tap-hover" @click="submit()">确认无误并提交</view>
				</view>
 			</view>
		</view>
 	</uni-popup>
 </template>

 <script>
 	import { validateIDCard, validatePhoneNumber } from '../../../common/utils'
 	import requestConfig from '../../../network/config'
 	import { useUserStore } from '../../../store/userStore'
	
 	export default {
 		data() {
 			return {
 				userStore: useUserStore(),
 				formData: {
 					name: '',
 					id_card: '',
 					mobile: '',
 					bank_no: '',
					bank_name: '',
 					bank_mobile: ''
 				},
 				auth_id: 0,
 				isEdit: false, // 是否是编辑
 				checkBg: `url(${requestConfig.imageUrl}x5j_file/2025-03-05/174116483567c81123ea4b6.png)`,
 			}
 		},
 		computed: {
 			btnDisabled() {
 				let b = false
 				for (let key in this.formData) {
 					if (this.formData.hasOwnProperty(key)) {
 						if (!this.formData[key]) {
 							b = true
 						}
 					}
 				}
 				return b
 			}
 		},
 		onLoad(options) {
 			if (options.isEdit) {
 				this.getPersonalAuthInfo()
 			}
 		},
 		methods: {
 			check() {
 				this.$refs.checkPopup.open()
 			},
 			async submit() {
 				const {
 					mobile,
					id_card,
 					bank_mobile
 				} = this.formData
 				if (!validatePhoneNumber(mobile)) {
 					uni.showToast({
 						title: '手机号格式不正确',
 						icon: 'none'
 					})
 					return
 				}
				if (!validateIDCard(id_card)) {
					uni.showToast({
						title: '身份证号码格式不正确',
						icon: 'none'
					})
					return
				}
 				if (!validatePhoneNumber(bank_mobile)) {
 					uni.showToast({
 						title: '银行预留手机号格式不正确',
 						icon: 'none'
 					})
 					return
 				}
 				const res = await this.$request.post('/api/user/cert', this.formData)
 				if (res.code == 200) {
 					uni.showToast({
 						title: '上传成功',
 						icon: 'success'
 					})
					uni.$emit('updateUserInfo')
 					setTimeout(() => {
 						uni.navigateBack()
 					}, 1600)
 				}
 			},
			async getPersonalAuthInfo() {
				const res = await this.$request.get('/api/user/cert_detail')
				if (res.code == 200) {
					const data = res.data
					for (let key in this.formData) {
						if (this.formData.hasOwnProperty(key)) {
							this.formData[key] = data[key]
						}
					}
				}
			}
 		}
 	}
 </script>

 <style scoped lang="scss">
 	.shop-container {
 		padding: 16rpx 30rpx;
 		padding-bottom: 200rpx;

 		.auth-desc {
 			font-size: 26rpx;
 			color: #7B7B7B;
 			line-height: 44rpx;
 		}
		.form-item{
			padding-top: 24rpx;
		}
 		.ipt-item {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
 			padding: 20rpx 0 40rpx;
 			font-size: 30rpx;
 			border-bottom: 1px solid rgba(0, 0, 0, 0.1);

 			.name {
 				font-weight: 500;
 			}

 			.ipt {
 				width: calc(100% - 210rpx);
 				text-align: right;
				color: #444;
				font-size: 28rpx;
 			}
 		}

 		.top-distance {
 			padding-top: 40rpx;
 		}
		.no-border {
			border-bottom: none;
		}
 		.upload-item {
 			margin-top: 40rpx;

 			.name {
 				font-size: 30rpx;
 				font-weight: 500;
 				margin-bottom: 30rpx;
 			}
 		}
 	}

 	.popup-content {
 		width: 632rpx;
 		height: 828rpx;
		border-radius: 24rpx;
 		background-image: v-bind(checkBg);
 		background-repeat: no-repeat;
 		background-size: 100% ;
 		padding: 190rpx 30rpx 0;

 		.info-wrapper {
 			width: 100%;

 			.check-white {
 				width: 100%;
 			}

 			.info {
 				background-color: #fff;
 				width: 100%;
 				padding: 0 30rpx;
 				position: relative;
 				// height: 400rpx;
 				margin-top: -20rpx;
 				border-radius: 0 0 24rpx 24rpx;

 				.info-item {
 					display: flex;
 					justify-content: space-between;
 					align-items: center;
 					padding-bottom: 38rpx;

 					.name {
 						font-size: 26rpx;
 						font-weight: 500;
 					}

 					.text {
 						font-size: 24rpx;
 						color: #7B7B7B;
 						text-align: right;
 					}
 				}
 			}

 			.btn-wrapper {
 				width: 100%;
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
 				margin-top: 40rpx;
 				font-size: 32rpx;

 				.left-btn {
 					width: 250rpx;
 					height: 72rpx;
 					text-align: center;
 					line-height: 72rpx;
 					border: 3rpx solid $uni-color-primary;
 					border-radius: 36rpx;
 					color: $uni-color-primary;
 				}

 				.right-btn {
 					width: calc(100% - 276rpx);
 					height: 72rpx;
 					text-align: center;
 					line-height: 72rpx;
 					background-color: $uni-color-primary;
 					border-radius: 36rpx;
 					color: #fff;
 				}
 			}
 		}
 	}
 </style>